<template>
    <div class="product-detail">
        <!-- 标题与元信息整合模块 -->
        <div class="product-header module-border">
            <!-- 产品图片 -->
           <div >
             <el-image 
                :src="product.image" 
                fit="contain" 
                alt="产品图片"
                style="width: 78px; height: 78px; float: left; margin-right: 20px;background-color: #fff;border-radius: 5px;"
            >
                <!--  :preview-src-list="[product.image]" -->
            </el-image>
           </div>
            <!-- 主标题 -->

            <div class="header-first-row">
                <h1 class="main-title">{{ product.name }}</h1>

                <div class="tags-container">
                    <span v-for="(tag, tagIndex) in product.baseIndustryList" :key="tagIndex" class="tilted-tag">
                        <span class="tag-text">{{ tag.name }}</span>
                    </span>
                </div>
            </div>

            <!-- 元信息 -->
            <div class="meta-info">
                <span class="meta-item"><i style="margin-right: 3px;" class="el-icon-view"></i>浏览量 {{ product.pvCount
                    }}</span>
                <span class="upload-date">上传日期 {{ product.createTime }}</span>
            </div>
        </div>

        <!-- 产品描述模块 -->
        <div class="description-section module-border">
            <h2 class="section-title">产品描述</h2>
            <p class="description-content">
                {{ product.description }}
            </p>
            <!-- <h3 class="highlights-title">核心亮点:很多</h3> -->
            <h2 class="section-title">产品参数</h2>
            <div class="params-list">
                <!-- 使用v-if检查是否有有效数据 -->
                <template v-if="isProductStandardValid">
                    <p v-for="(value, key) in parsedParams" :key="key" class="param-item">
                        {{ key }}: {{ value }}
                    </p>
                </template>
                <p v-else class="param-item">暂无产品参数</p>
            </div>
        </div>

        <!-- 产品参数模块 -->


        <div class="module-border" style="display: flex;align-items: center;justify-content: center;">
            <el-button type="primary" @click="openComplaintDialog">投诉</el-button>
        </div>

        <!-- 投诉弹窗 -->
        <el-dialog title="产品投诉" :visible.sync="dialogVisible" width="600px" center :close-on-click-modal="false"
            :showClose="false">
            <el-form :model="complaintForm" label-width="0px">
                <el-form-item label="">
                    <el-select v-model="complaintForm.type" placeholder="请选择投诉类型" style="width: 100%">
                        <el-option v-for="item in cplistoptions" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="complaintForm.reason" type="textarea"  maxlength="50" show-word-limit :rows="4" placeholder="请输入投诉原因"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-change="handletpChange" :auto-upload="false" multiple limit="5">
                        <i class="el-icon-plus"></i>
                        <!-- <span class="el-upload__text"><em>点击上传</em></span> -->
                    </el-upload>
                    <span style="color: #ddd;font-size: 12px;">图片大小不得超过2M</span>
                    <el-dialog :visible.sync="dialogVisible2">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <button class="buttontousu" @click="dialogVisible = false">取消</button>
                <button class="buttontousu2" @click="submitComplaint">提交</button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getOneProductDetail, getDictList, getComplaintList, GcUploadImage } from '../../api/user';
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible2: false,
            product: {},
            dialogVisible: false,
            complaintForm: {
                type: '',
                reason: ''
            },
            cplistoptions: [],
            tousuId: "",
            uploadedFileNames: [], // 存储上传成功后的文件名数组
            fileList: [] // 存储用户选择的文件列表
        };
    },
    computed: {
        // 计算属性来解析和验证产品参数
        parsedParams() {
            try {
                const standard = this.product.productStandard;
                // 如果已经是对象，直接返回
                if (typeof standard === 'object' && standard !== null) {
                    return standard;
                }
                // 如果是字符串，尝试解析
                else if (typeof standard === 'string') {
                    // 清理可能的多余引号和转义字符
                    const cleanString = standard.replace(/^"|"$/g, '').replace(/\\"/g, '"');
                    // 尝试解析JSON
                    const parsed = JSON.parse(cleanString);
                    // 确保解析后是对象
                    if (typeof parsed === 'object') {
                        return parsed;
                    }
                }
                return {};
            } catch (error) {
                console.error('解析产品参数失败:', error);
                return {};
            }
        },
        // 检查是否有有效参数
        isProductStandardValid() {
            return Object.keys(this.parsedParams).length > 0;
        }
    },
    mounted() {
        // 在组件挂载后，可以根据实际情况加载数据
        // 例如从路由参数中获取id，然后调用API获取详情
        this.tousuId = this.$route.query.id;
        const id = this.$route.query.id;
        if (id) {
            // 根据id加载详情数据
            this.loadDetailcp(id)
        }
        this.getcpleix()
    },
    methods: {
        // 加载产品详情数据
        loadDetailcp(id) {
            // 调用API获取数据
            getOneProductDetail(id).then(res => {
                this.product = res.data
            }).catch(err => {
                console.error('获取详情失败:', err)
            })
        },

        getcpleix() {
            getDictList("complaint_products_type").then(res => {
                if (res.code === 200) {
                    this.cplistoptions = res.data;
                } else {
                    this.$message.error('获取状态信息失败')
                }
            })
        },

        handleRemove(file, fileList) {
            // console.log('移除文件:', file, fileList);
            this.fileList = fileList;
        },

        handletpChange(file, fileList) {
            // console.log('文件改变:', file, fileList);
            this.fileList = fileList;
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url || URL.createObjectURL(file.raw);
            this.dialogVisible2 = true;
        },

        // 打开投诉弹窗
        openComplaintDialog() {
            // 重置表单和状态
            this.complaintForm = {
                type: '',
                reason: ''
            };
            this.uploadedFileNames = [];
            this.fileList = [];
            // 显示弹窗
            this.dialogVisible = true;
        },

        // 上传单个图片
        uploadSingleImage(file) {
            return new Promise((resolve, reject) => {
                GcUploadImage({ file: file.raw }).then(res => {
                    if (res.code === 200) {
                        resolve(res.data.fileName);
                    } else {
                        reject(new Error('图片上传失败'));
                    }
                }).catch(err => {
                    reject(err);
                });
            });
        },

        // 提交投诉
        submitComplaint() {
            // 表单验证
            if (!this.complaintForm.type) {
                this.$message.error('请选择投诉类型');
                return;
            }

            if (!this.complaintForm.reason) {
                this.$message.error('请输入投诉原因');
                return;
            }

            // 显示加载中
            this.$loading({
                lock: true,
                text: '提交中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // 如果有选择的图片，先上传图片
            const uploadPromises = this.fileList.map(file => this.uploadSingleImage(file));

            Promise.all(uploadPromises).then(fileNames => {
                // 图片上传成功，将文件名用逗号拼接
                const imageParam = fileNames.join(',');

                // 提交投诉
                return getComplaintList({
                    targetType: 2,
                    targetId: this.tousuId,
                    type: this.complaintForm.type,
                    reason: this.complaintForm.reason,
                    image: imageParam
                });
            }).then(res => {
                this.$loading().close();

                if (res.code === 200) {
                    this.$message.success('投诉提交成功');
                    this.dialogVisible = false;
                } else {
                    this.$message.error('投诉提交失败');
                }
            }).catch(err => {
                this.$loading().close();
                console.error('提交失败:', err);
                this.$message.error('操作失败，请重试');
            });
        }
    }
};
</script>

<style scoped>
/* 基础样式重置 */
.product-detail {
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* 通用模块边框样式 */
.module-border {
    /* border: 1px solid #e0e0e0; */
    padding: 20px;
    background-color: #04142B;
    box-sizing: border-box;
}

.header-first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tilted-tag {
    display: inline-block;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #DDDDDD;
    margin: 0 5px;
    font-size: 12px;
    padding: 5px;
    transform: skew(-15deg);
    color: #fff;
}

.tag-text {
    transform: skew(15deg);
}

/* 产品头部模块 */
.product-header {
    padding: 25px;
    text-align: center;
    border-bottom: 1px solid #666;
}

/* 主标题样式 */
.main-title {
    font-size: 28px;
    margin: 0 0 15px 0;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    text-align: left;
}

/* 元信息样式 */
.meta-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #777;
    gap: 10px 20px;
    margin: 10px 0;

}

.meta-item {
    white-space: nowrap;
    color: #ddd;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

.upload-date {
    margin-left: auto;
    display: inline-block;
    color: #ddd;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;

}

/* 模块标题通用样式 */
.section-title {
    font-size: 20px;
    color: #fff;
    padding-bottom: 10px;
    font-weight: 900;
}

/* 描述内容样式 */
.description-content {
    line-height: 1.8;
    color: #ddd;
    margin-bottom: 15px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;

}

.highlights-title {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 500;
}

.highlights-list {
    padding-left: 20px;
    margin-bottom: 0;
}

.highlight-item {
    margin-bottom: 8px;
    line-height: 1.6;
    color: #444;
}

/* 参数表格样式 */
.params-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.param-key {
    width: 30%;
    padding: 10px;
    vertical-align: top;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
}

.param-value {
    width: 70%;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

/* 响应式调整 */
@media (max-width: 600px) {
    .product-detail {
        padding: 10px;
    }

    .module-border {
        padding: 15px;
    }

    .product-header {
        padding: 20px 15px;
    }

    .main-title {
        font-size: 24px;
    }

    .meta-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .upload-date {
        margin-left: 0;
    }

    .param-key,
    .param-value {
        display: block;
        width: 100%;
    }
}

/* 在<style scoped>部分修改产品描述模块的样式 */
.description-section {
    /* 添加固定高度 */
    max-height: 600px;
    /* 启用垂直滚动 */
    overflow-y: auto;
    /* 优化滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Webkit浏览器（Chrome, Safari等）的滚动条样式 */
.description-section::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.description-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 添加产品参数项样式 */
.param-item {
    margin: 8px 0;
    padding: 4px 0;
    line-height: 1;
    font-size: 14px;
    color: #ddd;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;

}


.buttontousu {
    width: 158px;
    height: 40px;
    background: #182F50;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    margin: 0 10px;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);
    font-size: 14px;

}

.buttontousu2 {
    width: 158px;
    height: 40px;
    margin: 0 10px;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);
    font-size: 14px;


    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}

.buttontousu2:hover {
    width: 158px;
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);

}


/* 按钮 */
:deep(.el-button--small) {
    width: 300px;
    height: 46px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    transform: skew(-10deg);
}

/* 弹窗的文本 .el-textarea__inner */
:deep(.el-textarea__inner) {
    background-color: #092742;
    border: 1px solid #00A3FF;
}

/* .el-dialog 弹窗样式优化 */
:deep(.el-dialog) {
    border: none;
}

:deep(.el-upload-dragger) {
    border: none;
}

:deep(.el-dialog__header) {
    border-bottom: none;
}

:deep(.el-upload--picture-card) {
    background: linear-gradient(181deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border: 1px solid #fff;
    width: 88px;
    height: 88px;
    position: relative;

}

:deep(.el-select .el-input__inner) {
    border: 1px solid #00A3FF;
}

/* 弹窗文本 */
:deep(.el-form-item__label) {
    color: #fff;
}

:deep(.el-upload--picture-card i) {
    color: #fff;
    text-align: center;
    font-size: 16px;
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;

}
:deep(.el-textarea .el-input__count){
    background: none;
}
</style>
